var laydate,layer;
layui.use(['laydate','layer'], function(){
    laydate = layui.laydate;
    layer = layui.layer;
    dateInit()
    tinyInit()
  });
$(function () { 
    getCategory();
    getArticleDetail();
 })
//  获取文章id
 let id = location.href.split("=")[1];

//  图片上传
var file_cover;
function changeCoverImage(){
    file_cover = $("#inputCover")[0].files[0];
    let imgUrl = URL.createObjectURL(file_cover);
    $(".article_cover").prop("src",imgUrl);
}
// 渲染文章类别列表
function getCategory(){
    $.ajax({
        url: "/admin/category/list",
        method: "get",
        success(res){
            console.log(20,res);
            if(res.code == 200){
                $("#category").html(template("categoryList",res))
            }
        }
    })
}
// 发表时间
function dateInit(){
    //执行一个laydate实例
    laydate.render({
        elem: '#articleDate' //指定元素
      });
}

// 文章内容，富文本
function tinyInit(){
    tinymce.init({
        selector: '#articleContent',
        language:'zh_CN',
        init_instance_callback: function(){
            // init_instance_callback是富文本渲染成功后的回调函数
            // 那么我们可以在这里渲染富文本默认内容
            // getArticleDetail()
        }
      });
      
}


//  console.log(id);
// 根据文章id获取文章详情数据
function getArticleDetail(){
    $.ajax({
        url: "/admin/article/search",
        method: "get",
        data: {
            id
        },
        success(res){
            // 内容回显
            // 1、标题回显
            $("#inputTitle").val(res.data.title);
            // 2、封面
            $(".article_cover").prop("src",res.data.cover);
            // 3、类别回显
            $("#category").val(res.data.categoryId);
            // 4、日期回显
            $("#articleDate").val(res.data.date);
            // 5、富文本（内容）回显
            // 在这里使用富文本的方法来回显内容，无法显示出来，为什么呢？
            // 答：因为富文本的渲染执行慢与富文本内容的设置
            // 如何解决呢？
            // 答：方法一：我们可以直接给多行文本域设置内容即可，代码：$("#articleContent").val(res.data.content);
            // 方法二：在富文本渲染完成后的回调函数中调用getArticleDetail函数即可
            // 设置内容方法一：
            // tinyMCE.editors["articleContent"].setContent(res.data.content); 
            // 设置内容方法二：
            $("#articleContent").val(res.data.content);
        }
    })
}

// 修改或者存草稿
function saveArticle(state){
    // 获取文章数据
    let title = $("#inputTitle").val();
    // file_cover
    let category = $("#category").val();
    let date = $("#articleDate").val();
    // 获取富文本内容
    let content = tinyMCE.editors["articleContent"].getContent();
    // 创建formData对象
    let formData = new FormData();
    formData.append("id",id);
    formData.append("title",title);
    formData.append("cover",file_cover);
    formData.append("categoryId",category);
    formData.append("date",date);
    formData.append("content",content);
    formData.append("state",state);
    // 调用编辑接口
    $.ajax({
        url: "/admin/article/edit",
        method: "post",
        data: formData,
        contentType: false,
        processData: false,
        success(res){
            console.log(116,res);
            if(res.code == 200){
                location.href = "article_list.html";
            }
            layer.msg(res.msg)
        }
    })
}

